<template>
	<div id="recommend">
		<div class="right-recommend">
			<ul class="recommend-item">
				<h3>今日推荐</h3>	
				<li v-for="(resource) in resourceInformation" :key="resource.id">
					<!-- 每日推荐配图 -->
					<div class="recommend-img"><img :src="resource.resourceCover" style="width:50px;height:50px"></div>
					<!-- 文字描述 -->
					<div class="recommend-word"><h4>{{resource.resourceTitle}}</h4></div>
				</li>
			</ul>
		</div>

		<div class="right-recommend">
			<ul class="recommend-item">
				<h3>专栏推荐</h3>	
				<li v-for="(article) in columnArticleInformation" :key="article.id" @click="clickColumnTitle(article,$event)">
					<!-- 文字描述 -->
					<div class="recommend-word"><h4>{{article.articleTitle}}</h4></div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import axios from 'axios';
export default {
	mounted(){
		this.getResourceForRecommend()
		this.getColumnPartitionInformation()
	},
    data(){
		return{
			// start传递给后台，用作查询resource表中信息的LIMIT关键字条件
			start:0,
			resourceInformation:[],

			// start传递给后台，用作查询resource表中信息的LIMIT关键字条件
			columnArticleInformation:[],
			columnId:'',
			articleInfo:{id:this.columnId},
		}
	},
	methods:{
		getResourceForRecommend(){
			axios.post('http://localhost:8080/resource/recommend',this.start).then((res)=>{
				console.log(this.start)
				console.log(res)
				console.log(res.data)
				this.resourceInformation=res.data
				console.log(this.resourceInformation)
			})
		},

		getColumnPartitionInformation(){
			axios.post('http://localhost:8080/column/selectColumnList',this.start).then((res)=>{
				console.log(this.start)
				console.log(res)
				console.log(res.data)
				this.columnArticleInformation=res.data
				console.log(this.columnArticleInformation)
			})
		},
		clickColumnTitle(article,e){
			console.log(e.target)
			console.log(article.articleTitle+e)
			console.log(article)
			this.articleId = article.articleId
			this.columnId = this.articleId
			console.log(this.columnId)
			// 向readColumn页面传递article的id
			this.$router.push({name:'readColumn',params:{id:this.columnId}})
		}
	}
}
</script>

<style scoped>
/* 今日推荐栏样式 */
#recommend{
	margin-top: 0%;
	float: right;
	width: 550px;
	height: 600px;
}
.right-recommend{
	float: right;
	display: flex;
	/* align-items: center; */
	width: 550px;
	height: 800px;
}
.right-recommend ul{
	width: 550px;
	list-style: none;
}
.right-recommend li{
	width: 450px;
	height: 50px;
	list-style: none;
	float: right;
	line-height: 30px;
}
.recommend-img{
	float:left;
	width: 50px;
	height: 50px;
}
.recommend-word{
	float:right;
	width: 400px;
	height: 50px;
}
</style>
